<template>
	<view class="" :style="[AppSkinVar]">
		<view class="e-p-t-20 e-p-l-20 e-p-r-20 bg-white">
			<view class="e-flex data-panel-container" :style="{background: bgGradient}" v-if="statistics">
				<view class="e-flex-1  e-flex-xy-center e-flex-column">
					<view class="fw-600 c-white e-font-48 e-p-b-14">
						{{statistics.count}}
					</view>
					<view class="c-white e-font-26">
						{{$t('order.订单笔数')}}
					</view>
				</view>
				<view class="dpc-line">

				</view>
				<view class="e-flex-1  e-flex-xy-center e-flex-column">
					<view class="fw-600 c-white e-font-48 e-p-b-14">
						{{statistics.money}}
					</view>
					<view class="c-white e-font-26">
						{{$t('order.业绩金额')}}
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white h-90 e-p-l-20 e-p-r-20 e-p-t-30 e-flex">
			<e-search :show-action="false" :search-icon-color="AppSkin.primary" :placeholder="$t('order.请输入会员昵称搜索')"
				@focus="$goTo('/pages/teamOrder/search')"></e-search>
			<image class="img-32 e-p-l-14" src="./static/date_time_pick.png" mode="" @tap="show = true"></image>
		</view>
		<view class="h-90 bg-white e-flex c-333">
			<view class="e-flex-1 e-flex e-flex-column h-100 e-p-b-10" @tap="handleChange(item.value)"
				v-for="item in activeList" :key="item.value">
				<view class="e-font-28 e-flex-1 e-flex" :class="{'fw-600': active === item.value}">
					{{$t(item.label)}}
				</view>
				<view class="bottom-line" :style="{background: active === item.value ? AppSkin.primary : ''}">

				</view>
			</view>
		</view>
		<view class="" v-if="isEmpty">
			<empty paddingTop="100rpx" :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" :show="true">
			</empty>
		</view>
		<view class="" v-else>
			<scroll-view class="scroll-view-box" scroll-y @scrolltolower="getData" lower-threshold="60">
				<view class="e-p-20">
					<OrderItem v-for="item in list" :info="item" :key="item.id" :statusText="statusTextList">
					</OrderItem>
				</view>
				<load-more v-if="list.length" :showLoad="showLoad"></load-more>
			</scroll-view>
		</view>


		<e-overlay :show="show" @tap="show = false">
			<view class="e-p-t-20 e-p-l-20 e-p-r-20 bg-white">
				<view class="e-flex data-panel-container" :style="{background: bgGradient}" v-if="statistics">
					<view class="e-flex-1  e-flex-xy-center e-flex-column">
						<view class="fw-600 c-white e-font-48 e-p-b-14">
							{{statistics.count}}
						</view>
						<view class="c-white e-font-26">
							{{$t('order.订单笔数')}}
						</view>
					</view>
					<view class="dpc-line">

					</view>
					<view class="e-flex-1  e-flex-xy-center e-flex-column">
						<view class="fw-600 c-white e-font-48 e-p-b-14">
							{{statistics.money}}
						</view>
						<view class="c-white e-font-26">
							{{$t('order.业绩金额')}}
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white h-90 e-p-l-20 e-p-r-20 e-p-t-30 e-flex">
				<e-search :show-action="false" :search-icon-color="AppSkin.primary" :placeholder="$t('order.请输入会员昵称搜索')"
					@focus="$goTo('/pages/teamOrder/search')">
				</e-search>
				<image class="img-32 e-p-l-14" src="./static/date_time_pick.png" mode="" @tap="show = false"></image>
			</view>
			<view class="h-90 bg-white e-flex c-333">
				<view class="e-flex-1 e-flex e-flex-column h-100 e-p-b-10" @tap="handleChange(item.value)"
					v-for="item in activeList" :key="item.value">
					<view class="e-font-28 e-flex-1 e-flex" :class="{'fw-600': active === item.value}">
						{{$t(item.label)}}
					</view>
					<view class="bottom-line" :style="{background: active === item.value ? AppSkin.primary : ''}">

					</view>
				</view>
			</view>
			<CusCalendar style="width:100%" :rows="selected" @select="selectDate">
			</CusCalendar>
		</e-overlay>

	</view>
</template>

<script setup lang="ts">
	import { ref, computed, watch } from 'vue'
	import dayjs from '@/uni_modules/endless-ui/libs/utils/dayjs'
	import { getTeamRewardLog } from '@/common/request/api'
	import type { DictsItem } from '@/common/request/api'
	import OrderItem from './child/order-item.vue'
	import CusCalendar from './child/calendar/index.vue'
	import { useCurrentInstance, useQueryPage } from '@/common/hooks'
	import { useInit, useOrder } from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	import { arrayDeepClone } from '@/common/utils'

	const ctx = useCurrentInstance()

	const orderStore = useOrder()
	const {
		orderStatusText
	} = storeToRefs(orderStore)
	const { AppSkin } = storeToRefs(useInit())

	const bgGradient = computed(() => {
		return `linear-gradient(to right, ${AppSkin.value.primary}, ${AppSkin.value.primary.replace('1)', '0.65)')})`
	})



	const show = ref(false)
	const statistics = ref({
		count: 0,
		money: 0
	})
	const active = ref(-1)

	const activeList = [{
		label: 'common.全部',
		value: -1
	},
	{
		label: 'order.待分佣',
		value: 0
	},
	{
		label: 'order.已分佣',
		value: 1
	},
	{
		label: 'order.已取消',
		value: 2
	}
	]

	const {
		showLoad,
		isEmpty,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getTeamRewardLog,
		option: {
			responseInterception(res) {
				statistics.value = {
					count: res.data.total,
					money: res.orderMoney || 0
				}
			}
		}

	})

	handleRefresh()

	const getData = () => {
		handleQueryPage()
	}

	if (!orderStatusText.value.length) {
		orderStore.getOrderStatusText()
	}

	watch(show, () => {
		handleRefresh()
	})

	const statusTextList = computed(() => {
		if (orderStatusText.value && orderStatusText.value.length) {
			const arr : DictsItem[] = JSON.parse(JSON.stringify(orderStatusText.value))
			arr.forEach(item => {
				if (item.dictValue === '0') {
					item.dictLabel = ctx.$t('polo.待付款')
				}
				if (item.dictValue === '1') {
					item.dictLabel = ctx.$t('polo.已付款')
				}
				if (item.dictValue === '3') {
					item.dictLabel = ctx.$t('polo.已收货')
				}
			})
			return arr
		}
		return []
	})
	type DateItem = {
		text : string | number;
		date : string;
		color : string;
		now : boolean;
	}
	const selected = ref<DateItem[]>([])


	// 切换日历时触发
	// 点击日期返回当前日期对象 
	const selectDate = (date : DateItem) => {
		// 对上一次选择的日期数组进行深度克隆
		let _selected = arrayDeepClone(selected.value)
		// 选择区间形式
		if (_selected.length === 0 || _selected.length >= 2) {
			// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期
			_selected = [{
				...date,
				color: AppSkin.value.primary
			}]
		} else if (_selected.length === 1) {
			// 如果已经选择了开始日期
			const existsDate = _selected[0].date
			// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期
			if (dayjs(date.date).isBefore(existsDate)) {
				_selected = [{
					...date,
					color: AppSkin.value.primary
				}]
			} else if (dayjs(date.date).isAfter(existsDate)) {
				// 如果当前日期大于已有日期，将当前的添加到数组尾部
				_selected.push({
					...date,
					color: AppSkin.value.primary
				})
				const startDate = _selected[0]
				const endDate = _selected[1]
				const arr = []
				let i = 0
				do {
					// 将开始和结束日期之间的日期添加到数组中
					arr.push({
						color: AppSkin.value.primary,
						date: dayjs(startDate.date).add(i, 'day').format("YYYY-MM-DD"),
						now: false,
						text: Number(startDate.text) + i
					})
					i++
					// 累加的日期小于结束日期时，继续下一次的循环
				} while (dayjs(startDate.date).add(i, 'day').isBefore(dayjs(endDate.date)))
				// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来
				arr.push(endDate)
				_selected = arr
			} else {
				_selected.push({
					...date,
					color: AppSkin.value.primary
				})
			}

		}
		selected.value = arrayDeepClone(_selected)
	}
	const handleChange = (val : number) => {
		active.value = val
		handleRefresh()
	}
</script>

<style lang="scss" scoped>
	.data-panel-container {
		width: 100%;
		height: 216rpx;
		// background: linear-gradient(225deg, #36B6B2 0%, #197F7B 100%);
		border-radius: 10px;

		.dpc-line {
			width: 1rpx;
			height: 72rpx;
			background: #FFFFFF;
			opacity: 0.2;
		}
	}


	.h-100 {
		height: 100rpx;
	}

	.h-90 {
		height: 90rpx;
	}

	.bottom-line {
		width: 46rpx;
		height: 6rpx;
		border-radius: 3rpx;
	}

	.scroll-view-box {
		height: calc(100vh - 236rpx - 90rpx - 100rpx);
	}
</style>